import React, { useEffect, useState } from 'react'
import { Table, Button, notification } from 'antd'
import { getArticle,updateAuditStateArticle,delArticle } from '../../api/api'

export default function NewsPublish(props) {
  const [dataSource, setDataSource] = useState([]);
  const columns = [
    {
      title: '新闻标题',
      dataIndex: 'title',
      width: 250,
      render: (title, item) => {
        return <a href={`#/news-manage/preview/${item.id}`}>{title}</a>
      }
    },
    {
      title: '作者',
      dataIndex: 'nickname',
    },
    {
      title: '新闻分类',
      dataIndex: 'classifyName'
    },
    {
      title: 'VIP文章',
      dataIndex: 'vip',
      render: (vip) => {
        return vip ? '是' : '否'
      }
    },
    {
      title: '操作',
      render: (item) => {
        return (
          <div>
            {
              item.publishState === 1 && <Button type='primary' onClick={() => {
                //修改文章审核状态
                updateAuditStateArticle({
                  id: item.id,
                  publishState: 2,
                  publishTime: Date.now()
                })
                setDataSource(dataSource.filter(data => data.id !== item.id))
                notification.info({
                  message: '通知',
                  description: `您可以到【发布管理/已发布】中查看您的新闻`,
                  placement: "bottomRight",
                });
              }}>发布</Button>
            }
            {
              item.publishState === 2 && <Button danger onClick={() => {
                //修改文章审核状态
                updateAuditStateArticle({
                  id: item.id,
                  publishState: 3,
                })
                setDataSource(dataSource.filter(data => data.id !== item.id))
                notification.info({
                  message: '通知',
                  description: `您可以到【发布管理/已下线】中查看您的新闻`,
                  placement: "bottomRight",
                });
              }}>下线</Button>
            }
            {
              item.publishState === 3 && <Button type='primary' danger onClick={() => {
                //删除文章
                delArticle({
                  id: item.id
                })
                setDataSource(dataSource.filter(data => data.id !== item.id))
                  notification.info({
                    message: '通知',
                    description: `新闻【${item.title}】已删除`,
                    placement: "bottomRight",
                  });
              }}>删除</Button>
            }
          </div>
        )
      }
    },
  ]
  const { id, username } = JSON.parse(localStorage.getItem("token"))
  useEffect(() => {
    const httpRequest = async () => {
      //获取文章
      const res=await getArticle({
        id,
        publishState: props.publishState
      })
      setDataSource(res.data.data)
      }
      httpRequest()
  }, [id, props.publishState])
  return (
    <div>
      <Table dataSource={dataSource} columns={columns} rowKey={(item) => item.id} pagination={{
        pageSize: 5,
        pageSizeOptions:[]
      }} />
    </div>
  )
}
